﻿<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">按钮 <kbd class="pull-right">Buttons</kbd></h1>
</div>
<div class="wrapper-md">
    <div class="row">
        <div class="col-md-6">
            <h4 class="m-t-xs">按钮情景模式</h4>
            <div>
                <button class="btn m-b-xs w-xs btn-default">默认<br />btn-default</button>
                <button class="btn m-b-xs w-xs btn-primary">主要<br />btn-primary</button>
                <button class="btn m-b-xs w-xs btn-success">成功<br />btn-success</button>
                <button class="btn m-b-xs w-xs btn-info">信息<br />btn-info</button>
                <button class="btn m-b-xs w-xs btn-warning">警告<br />btn-warning</button>
                <button class="btn m-b-xs w-xs btn-danger">危险<br />btn-danger</button>
                <button class="btn m-b-xs w-xs btn-dark">暗黑<br />btn-dark</button>
                <button class="btn m-b-xs w-xs btn-default disabled">禁用<br />disabled</button>
            </div>

            <h4 class="m-t-lg">
                前导符 <small>让图标和按钮之间有一条分割线</small>
            </h4>
            <p>
                <button class="btn m-b-xs btn-sm btn-primary btn-addon"><i class="fa fa-plus"></i>添加</button>
                <button class="btn m-b-xs btn-sm btn-danger btn-addon"><i class="fa fa-trash-o"></i>删除</button>
                <button class="btn m-b-xs btn-sm btn-success btn-addon"><i class="fa fa-minus pull-right"></i>后导符</button>
                <button class="btn m-b-xs btn-sm btn-warning btn-addon"><i class="fa fa-circle"></i>记录</button>
                <button class="btn m-b-xs btn-sm btn-default btn-addon"><i class="fa fa-print"></i>btn-addon</button>
            </p>
            <p>
                <button class="btn btn-default btn-addon"><i class="fa fa-music"></i>音乐</button>
                <button class="btn btn-info btn-addon"><i class="fa fa-play"></i>播放</button>
            </p>

            <h4 class="m-t">按钮大小</h4>
            <p>
                <button class="btn btn-default btn-lg">大 btn-lg</button>
                <button class="btn btn-primary btn-addon btn-lg"><i class="fa fa-plus"></i>带图标的大按钮</button>
            </p>
            <p>
                <button class="btn btn-default">中 默认大小</button>
            </p>
            <p>
                <button class="btn btn-default btn-sm">小 btn-sm</button>
            </p>
            <p>
                <button class="btn btn-default btn-xs">超小 btn-xs</button>
            </p>

            <h4 class="m-t-lg">下拉按钮</h4>
            <p class="text-muted">普通下拉按钮</p>
            <div class="m-b-sm">
                <div class="btn-group dropdown">
                    <button class="btn btn-default" data-toggle="dropdown">下拉按钮 <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
                <div class="btn-group dropdown">
                    <button class="btn btn-success" data-toggle="dropdown">下拉按钮 <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
            </div>
            <div class="m-b-sm">
                <div class="btn-group dropdown">
                    <button class="btn btn-default btn-sm" data-toggle="dropdown">下拉按钮 <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
            </div>
            <div class="m-b-sm">
                <div class="btn-group dropdown">
                    <button class="btn btn-default btn-xs" data-toggle="dropdown">下拉按钮 <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
            </div>
            <p class="text-muted">分割线和上拉按钮 </p>
            <div class="m-b-sm">
                <div class="btn-group dropdown">
                    <button class="btn btn-default">带分割符</button>
                    <button class="btn btn-default" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
                <div class="btn-group dropdown dropup">
                    <button class="btn btn-default">带分割符+上拉按钮</button>
                    <button class="btn btn-default" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                        <li class="divider"></li>
                        <li><a href>快扶我起来敲代码</a></li>
                    </ul>
                </div>
            </div>

            <h4 class="m-t-lg">带图标和文字的按钮</h4>
            <p>
                请参考 <a href="#/app/ui/icons" class="btn btn-default btn-xs"><i class="fa fa-file-image-o"></i> 图标</a>
            </p>
            <p>
                <button class="btn btn-default"><i class="fa fa-html5"></i> Html5</button>
                <button class="btn btn-info"><i class="fa fa-css3"></i> CSS3</button>
            </p>
            <p>
                <button class="btn btn-default btn-lg btn-block"><i class="fa fa-bars pull-right"></i> btn-block 块级按钮并带右侧图标</button>
            </p>
            <p>
                <button class="btn btn-default btn-block"><i class="fa fa-bars pull-left"></i> btn-block 块级按钮并带左侧图标</button>
            </p>
            <h4 class="m-t-lg">
                图标按钮
            </h4>
            <p>
                <button class="btn btn-sm btn-icon btn-info"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-sm btn-icon btn-danger"><i class="fa fa-google-plus"></i></button>
            </p>
            <h4 class="m-t-lg">
                圆形图标按钮
            </h4>
            <p>
                <button class="btn btn-rounded btn-sm btn-icon btn-default"><i class="fa fa-twitter"></i></button>
                <button class="btn btn-rounded btn btn-icon btn-default"><i class="fa fa-facebook"></i></button>
                <button class="btn btn-rounded btn-lg btn-icon btn-default"><i class="fa fa-google-plus"></i></button>
            </p>
        </div>
        <div class="col-md-6">
            <h4 class="m-t-xs">圆形按钮</h4>
            <div>
                <button class="btn m-b-xs w-xs btn-default btn-rounded">默认<br />Default</button>
                <button class="btn m-b-xs w-xs btn-primary btn-rounded">主要<br />Primary</button>
                <button class="btn m-b-xs w-xs btn-success btn-rounded">成功<br />Success</button>
                <button class="btn m-b-xs w-xs btn-info btn-rounded">信息<br />Info</button>
                <button class="btn m-b-xs w-xs btn-warning btn-rounded">警告<br />Warning</button>
                <button class="btn m-b-xs w-xs btn-danger btn-rounded">危险<br />Danger</button>
                <button class="btn m-b-xs w-xs btn-dark btn-rounded">暗黑<br />Dark</button>
                <button class="btn m-b-xs w-xs btn-default btn-rounded disabled">禁用<br />Disabled</button>
            </div>

            <h4 class="m-t-lg">按钮组</h4>
            <div class="m-b-sm">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">左</button>
                    <button type="button" class="btn btn-default">中</button>
                    <button type="button" class="btn btn-default">右</button>
                </div>
            </div>
            <p class="text-muted">垂直按钮组</p>
            <div class="btn-group-vertical m-b-sm">
                <button type="button" class="btn btn-default">上路</button>
                <button type="button" class="btn btn-default">中路</button>
                <button type="button" class="btn btn-default">下路</button>
            </div>
            <p class="text-muted">嵌套按钮组</p>
            <div class="btn-group m-b-sm">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-success">2</button>
                <button type="button" class="btn btn-default">3</button>
                <div class="btn-group dropdown">
                    <button type="button" class="btn btn-default" data-toggle="dropdown">
                        下拉按钮
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href>吃饭</a></li>
                        <li><a href>睡觉</a></li>
                        <li><a href>打代码</a></li>
                    </ul>
                </div>
            </div>
            <p class="text-muted">块级自适应按钮组</p>
            <div class="m-b-sm">
                <div class="btn-group btn-group-justified">
                    <a href class="btn btn-primary">左</a>
                    <a href class="btn btn-info">中</a>
                    <a href class="btn btn-success">右</a>
                </div>
            </div>
            <p class="text-muted">多个按钮组</p>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-default active">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <button type="button" class="btn btn-default">4</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">5</button>
                    <button type="button" class="btn btn-default">6</button>
                    <button type="button" class="btn btn-default">7</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">8</button>
                </div>
            </div>

            <h4 class="m-t-lg">按钮组件</h4>
            <p class="text-muted">
                <span>这里有一些简单的方法，可以用按钮快速的完成一些任务，比如折叠展开</span>
                <span class="text-muted hide" id="moreless"> 这种小功能可以大大的方便你的开发，简单几句代码就能完成 </span>
            </p>
            <p>
                <button class="btn btn-sm btn-default" ui-toggle-class="show" target="#moreless">
                    <i class="fa fa-plus text"></i>
                    <span class="text">更多</span>
                    <i class="fa fa-minus text-active"></i>
                    <span class="text-active">收拢</span>
                </button>
            </p>
            <p>
                <button class="btn btn-default" ui-toggle-class="btn-success">
                    <i class="fa fa-cloud-upload text"></i>
                    <span class="text">上传</span>
                    <i class="fa fa-check text-active"></i>
                    <span class="text-active">成功</span>
                </button>
                <a class="btn btn-default" ui-toggle-class="button">
                    <i class="fa fa-heart-o text"></i>
                    <i class="fa fa-heart text-active text-danger"></i>
                </a>
                <a class="btn btn-default" ui-toggle-class="button">
                    <span class="text">
                        <i class="fa fa-thumbs-up text-success"></i> 25
                    </span>
                    <span class="text-active">
                        <i class="fa fa-thumbs-down text-danger"></i> 10
                    </span>
                </a>
                <button class="btn btn-success" ui-toggle-class="show inline" target="#spin">
                    <span class="text">保存</span>
                    <span class="text-active">保存中...</span>
                </button>
                <i class="fa fa-spin fa-spinner hide" id="spin"></i>
            </p>
            <div class="m-b-sm">
                <div class="btn-group" ng-init="radioModel = 'Male'">
                    <label class="btn btn-sm btn-info" ng-model="radioModel" btn-radio="'Male'"><i class="fa fa-check text-active"></i> 帅哥</label>
                    <label class="btn btn-sm btn-success" ng-model="radioModel" btn-radio="'Female'"><i class="fa fa-check text-active"></i> 美女</label>
                    <label class="btn btn-sm btn-primary" ng-model="radioModel" btn-radio="'N/A'"><i class="fa fa-check text-active"></i> 保密</label>
                </div>
            </div>

            <div class="m-b-sm">
                <div class="btn-group" ng-init="checkModel = {option1: true, option2: false}">
                    <label class="btn btn-sm btn-default" ng-model="checkModel.option1" btn-checkbox>旅游</label>
                    <label class="btn btn-sm btn-default" ng-model="checkModel.option3" btn-checkbox>美食</label>
                </div>
            </div>

            <h4 class="m-t-lg">
                <button class="pull-right text-sm btn btn-xs btn-default" ui-toggle-class="btn-rounded" target="#social-buttons button">切换</button>
                分享到社区
            </h4>
            <p id="social-buttons">
                <button class="btn btn-rounded btn-sm btn-info"><i class="fa fa-fw fa-qq"></i> QQ</button>
                <button class="btn btn-rounded btn-sm btn-success"><i class="fa fa-fw fa-wechat"></i> 微信</button>
            </p>
        </div>
    </div>
</div>
